<script setup>

/**
 * @import libs
 */

/**
 * @import components
 */
import backIcon from '@/components/commons/backIcon.vue'
import topPlaceholder from '@/components/petDoctorComp/topPlaceholder.vue'
import topTitleBar from '@/components/petDoctorComp/chatComp/topTitleBar.vue'
import chatList from '@/components/petDoctorComp/chatComp/chatList.vue'
import chatInput from '@/components/petDoctorComp/chatComp/chatInput.vue'

/**
 * @import pinia stores
 */

</script>

<template>
    <div class="chat-page-class">
        <div class="chat-page-backimg-class">
            <backIcon></backIcon>
            <topPlaceholder></topPlaceholder>
            <topTitleBar></topTitleBar>
            <chatList></chatList>
            <chatInput></chatInput>
        </div>
    </div>
</template>

<style scoped>

.chat-page-class {
    width: 750rpx;
    height: 100vh;
    background-color: #ffefe0;

}

.chat-page-backimg-class {
    width: 750rpx;
    height: 100vh;
    background-image: url("@/static/imgs/pet_chat_back.png");
    background-size: cover;
}
</style>